import React, {Component} from "react";
import "./Footer.css"

export default class Footer extends Component{
    handleCheckall = (event) =>{
        this.props.Checkalltodo(event.target.checked)
    }
    handleDelAll = () =>{
        this.props.DelAllTodos()
    }
    render() {
        const {todos} = this.props
        const actionCount = todos.reduce((pre,todo) =>{return pre+(todo.action?1:0)},0)
        const total = todos.length
        return(
            <p className="footer">
                <input type="checkbox" name="Checkbox" value="" id="Checkbox" onChange={this.handleCheckall} checked={actionCount === total && total!==0 ? true : false}/>
                已完成{actionCount}/全部{total}
                <button className="button btn btn-outline-danger float-right" onClick={this.handleDelAll}>清楚所有已经完成的任务</button>
            </p>
        )
    }
}